<template>
  <div>
    <!--顶部空白-->
    <div style="height: 3rem;"></div>
    <van-notice-bar
        left-icon="volume-o"
        text="您可以上传抗原自测信息，请保证上传内容的真实性！"
    />
    <van-form style="margin-top: 5%">
      <van-field
          v-model="uploadForm.name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          disabled
          :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
          v-model="uploadForm.identity"
          name="身份证号"
          label="身份证号"
          placeholder="身份证号"
          disabled
          :rules="[{ required: true, message: '请填写身份证号' }]"
      />
      <van-field
          v-model="uploadForm.mobilePhone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          disabled
          :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field v-model="uploadForm.region" label="所在地区" readonly placeholder="选择省、市、区"
                 @click.native="handleArea"
                 :rules="[{ required: true, message: '请填写省、市、区' }]">
      </van-field>
      <!-- 所在地区弹窗 -->
      <van-popup v-model="isShowArea" position="bottom" round class="area-content" :overlay="true"
                 :close-on-click-overlay="true">
        <van-area title="所在地区" :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']"
                  @confirm="areaConfirm" @cancel="areaCancel"/>
      </van-popup>
      <van-field
          v-model="uploadForm.detailAddress"
          type="textarea"
          rows="1"
          autosize
          name="详细地址"
          label="详细地址"
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
      />
      <van-field
          readonly
          clickable
          label="采样方式"
          :value="uploadForm.detectMethodText"
          placeholder="选择采样方式"
          @click="isDetectMethodVisible = true"
          :rules="[{ required: true, message: '请选择采样方式' }]"
      />
      <van-popup v-model="isDetectMethodVisible" round position="bottom">
        <van-picker
            title="采样方式"
            show-toolbar
            :columns="detectMethodArr"
            @cancel="detectMethodArrCancel"
            @confirm="detectMethodArrConfirm"
        />
      </van-popup>
      <van-field name="radio" label="采样结果">
        <template #input>
          <van-radio-group v-model="uploadForm.detectResult" direction="horizontal"
                           :rules="[{ required: true, message: '请选择采样结果' }]"
          >
            <van-radio name="1">阳性</van-radio>
            <van-radio name="2">阴性</van-radio>
            <van-radio name="3">无效结果</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-image
          width="100%"
          height="5%"
          :src="image"
          fit="fill"
      />
      <van-field label="照片上传">
        <template #input>
          <van-uploader
              v-model="uploader"
              :after-read="afterRead"
              :max-count="1"
              accept='.jpg,.jpeg,.png'
          />
        </template>
      </van-field>
      <div style="margin-top: 5%; margin-bottom: 5%">
        <van-row>
          <van-col span="8">本人郑重承诺：</van-col>
        </van-row>
      </div>

      <van-checkbox v-model="checkedOne" checked-color="#3398FF" :label-disabled="false" shape="square" icon-size="15px">
          <span style="font-size: .5rem;color: #9F9D9D">
          为疫情防控，本人同意以上信息依法提交所在辖区疫情防控部门统筹管理。
          </span>
      </van-checkbox>
      <van-checkbox v-model="checkedTwo" checked-color="#3398FF" :label-disabled="false" shape="square" icon-size="15px">
          <span style="font-size: .5rem;color: #9F9D9D; text-align: left">
          上述信息是我本人填写，本人对信息内容的真实性和完整性负责。如果信息有误或缺失，本人愿意承担相应的法律责任。
            同时本人保证遵守防疫管控的各项规定配合并听从各项措施和要求。
          </span>
      </van-checkbox>
      <van-button round block type="info" native-type="submit" style="margin-top: 5%" @click="infoUpload()" :disabled="!checkedOne||!checkedTwo">提交</van-button>
    </van-form>
    <!--底部空白-->
    <div style="height: 5rem;"></div>
  </div>
</template>

<script>
import {areaList} from '@vant/area-data';
import {Toast} from 'vant';
import image from "@/assets/抗原结果对照表.jpg"

let forms = null;
export default {
  name: 'UploadAntigenMsg',
  data() {
    return {
      checkedOne: false,
      checkedTwo: false,
      image: image,
      isShowArea: false,
      areaList,
      uploader: [],
      detectMethodArr: [{text:'鼻腔拭子',value:1}, {text:'鼻咽拭子', value:2} , {text:'口腔拭子',value:3}],
      isDetectMethodVisible: false,
      uploadForm: {
        name: '',
        mobilePhone: '',
        identity: '',
        province:'',
        city:'',
        area:'',
        uploadUserId:'',
        photoName:'',
        detectMethodText: '',
        detailAddress: '',
        detectMethod: '',
        detectResult: '',
      }


    }
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    //通过token获取身份证号等信息
    getUserInfo(){
      var userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.uploadForm.uploadUserId = userInfo.id;
      this.uploadForm.name = userInfo.name;
      this.uploadForm.identity = userInfo .identity;
      this.uploadForm.mobilePhone = userInfo.mobilePhone;

    },
    //表单信息和图片一起上传
    infoUpload(){
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/send/sendIndividualAntigen",
            data: this.uploadForm
          }).then(res => {
        if (res.data.code === 200) {
          //图片上传方法
          this.reportPicUpload();
          Toast.success("上传成功");
          this.$router.push("/antigenHome");
        } else {
          Toast.fail("操作过于频繁\n" +
              "请稍后再试");
        }
      })
    },
    handleArea() {
      this.isShowArea = true;
    },
    areaConfirm(data) {
      let province = data[0];
      let city = data[1];
      let area = data[2];
      if (province.name) {
      } else {
        this.$toast("请选择省");
        return;
      }

      if (city.name) {
      } else {
        this.$toast("请选择市");
        return;
      }
      if (area.name) {
      } else {
        this.$toast("请选择区");
        return;
      }
      this.uploadForm.region = province.name + '-' + city.name + '-' + area.name;
      this.uploadForm.province = province.name;
      this.uploadForm.city = city.name;
      this.uploadForm.area = area.name;
      this.isShowArea = false;
    },
    areaCancel() {
      this.isShowArea = false;
    },
    detectMethodArrConfirm(val) {
      this.uploadForm.detectMethod = val.value;
      this.uploadForm.detectMethodText = val.text;
      this.isDetectMethodVisible = false;
    },
    detectMethodArrCancel() {
      this.isDetectMethodVisible = false;
    },
    //图片上传
    reportPicUpload() {
      if (forms === null || forms.length === 0) {
        return;
      }
      this.$axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';
      this.$axios({
        method: 'post',
        url: 'http://localhost:8085/upload/uploadAntigenPhoto',
        data: forms
      }).then(res => {
        if (res.data.data === 200) {
          Toast.success("上传成功");
        }
      })
    },

    afterRead(file) {
      forms = new FormData();
      var userInfo = JSON.parse(localStorage.getItem("userInfo"));
      let identity = userInfo.identity;
      identity = identity.substring(12);
      let tempFile = file.file;
      let type = file.type;
      let size = file.size;
      let newName = 'sample' + '-' + new Date().getTime() + '-' + identity + '.jpg';
      let uploadFile = new File([tempFile], newName, {type, size});
      forms.append("file", uploadFile);
      this.uploadForm.photoName = newName;
    }
  }
}
</script>


